<template>
	<view class="container">
		<view class="inner">
			<view class="title">
				输入卡号添加
			</view>
			<view class="ipt">
				<view class="label">卡号：</view> <input type="number" v-model="cardNo" placeholder="请拍照输入银行卡号"
					@blur="getBankName" />
				<uni-icons type="camera" size="30" @click="toTakePhoto"></uni-icons>
			</view>
			<view class="ipt">
				<view class="label">手机号：</view> <input type="number" v-model="bankPhone" placeholder="请输入预留手机号" />
			</view>
			<view class="ipt">
				<view class="label">省市：</view>
				<picker @change="bindPickerChange" :value="index" mode="region">
					<view class="uni-input">{{region}}</view>
				</picker>
			</view>
			<view class="ipt">
				<view class="label">银行名称：</view> <input type="text" v-model="bankName" placeholder="请输入银行名称" />
			</view>
			<view class="btn">
				<button @click="bandBankCard">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import bankInfo from "@/utils/bank.json"
	import {
		reqGetbankCardInfo,
		reqBindingbankCard
	} from "@/apis/my.js"
	import {
		fileUpload
	} from '@/apis/uni-fetch.js'
	export default {
		data() {
			return {
				type: '',
				tempPath: '',
				index: 0,
				region: '请选择开户行城市',
				code: [],
				bankCode: '',
				validated: false,

				bankName: '',
				cardNo: '',
				bankPhone: '',
				imgUrl: '',
				// 会员ID
				memberId: '',
				// 省份Code
				provId: '',
				// 市区Code
				areaId: '',
			}
		},
		onLoad(options) {
			this.memberId = this.$store.getters.userInfo.id
			this.type = options.type;
			this.tempPath = options.tempPath;
			if (this.tempPath) {
				this.getBankCardInfo();
			}
		},
		methods: {
			toTakePhoto() {
				uni.redirectTo({
					url: '/packageB/pages/takePhoto/takePhoto?type=2'
				})
			},
			getBankName() {
				let trimCardNo = this.trimAll(this.cardNo);
				uni.request({
					url: `https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=${trimCardNo}&cardBinCheck=true`,
					success: (res) => {
						if (!res.data.validated) {
							this.bankName = '';
							this.validated = false;
						} else {
							this.bankCode = res.data.bank;
							this.validated = true;
							this.bankName = bankInfo[res.data.bank];
						}
					}
				})
			},
			bindPickerChange(e) {
				this.code = e.detail.code;
				this.region = e.detail.value.join(',');
				this.provId = e.detail.code[0];
				this.areaId = e.detail.code[1];
			},
			async getBankCardInfo() {
				// if(!this.tempPath)return ;
				let fileOnlePath = await fileUpload(this.tempPath);
				this.imgUrl = fileOnlePath;
				let res = await reqGetbankCardInfo({
					type: "BankCard",
					url: fileOnlePath
				});
				if (res.code === 200) {
					uni.utils.toast('识别成功', 'success')
					this.cardNo = res.data.cardNumber;
					this.bankName = res.data.bankName;
					this.validated = true;
				} else {
					this.validated = false;
					uni.utils.toast('银行卡识别失败请重试', 'error')
					// setTimeout(()=>{
					// 	uni.redirectTo({
					// 		url:'/packageB/pages/bindSuccess/bindSuccess',
					// 	})
					// },1000)

				}
			},
			trimAll(ele) {
				if (typeof ele === 'string') {
					return ele.split(/[\t\r\f\n\s]*/g).join('');
				} else {
					console.error(`${typeof ele} is not the expected type, but the string type is expected`)
				}
			},
			async bandBankCard() {
				let {
					cardNo,
					bankName,
					imgUrl,
					provId,
					areaId,
					bankPhone,
					memberId,
					validated
				} = this;
				let trimCardNo = this.trimAll(cardNo);
				if (!validated) {
					uni.utils.toast('银行卡号输入有误');
					return;
				}
				if (provId == '') {
					uni.utils.toast('请选择开户行城市');
					return;
				}
				const phoneReg = /^1[3456789]\d{9}$/;
				const isVaild = phoneReg.test(bankPhone);
				if (!isVaild) {
					uni.utils.toast('手机号格式非法');
					return;
				}
				let obj = {
					cardNo:trimCardNo,
					bankName,
					imgUrl,
					provId,
					areaId,
					bankPhone,
					memberId
				};
				let res = await reqBindingbankCard(obj);
				if (res.code === 200) {
					uni.utils.toast('绑定成功', 'success');
					setTimeout(() => {
						uni.redirectTo({
							url: '/packageB/pages/bindSuccess/bindSuccess',
						})
					}, 1000)
				} else {
					uni.showModal({
						content: res.message,
						confirmText: '重试',
						cancelColor: '#999',
						confirmColor: '#2f64ff',
						mask: true,
						success: (result) => {
							if (!result.confirm) {
								uni.navigateBack();
							}
						},
					})
				}
				console.log(res);
			}
		},
	}
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.container {
		padding: 20rpx;

		.inner {
			padding: 40rpx 20rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.title {
				color: #1a1a1a;
				font-weight: bold;
				margin-bottom: 20rpx;
				font-size: 32rpx;
			}

			.ipt {
				margin-bottom: 30rpx;
				border-bottom: 1rpx solid #999;
				display: flex;
				align-items: center;

				.label {
					width: 160rpx;
				}

				input {
					height: 80rpx;
					flex: 1;
					// margin-bottom: 20rpx;
				}

				picker {
					flex: 1;
					height: 80rpx;

					.uni-input {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
					}
				}
			}

			.btn {
				width: 100%;
				display: flex;
				justify-content: space-around;
				height: 88rpx;
				margin-top: 100rpx;

				/deep/ button {
					width: 300rpx !important;
					height: 70rpx !important;
					line-height: 70rpx;
					background-color: #2f64ff !important;
					color: #fff;
					border-radius: 16rpx;
				}
			}
		}
	}
</style>